import React from 'react'
import Upload from './Upload';
import styles from '../../css/UploadImgs.module.css'
import ProgressView from "../../view/ProgressView";
import { AddCuiji, Common } from '../../const/imgs'
import { HintDialog } from '../../view/Dialog'
import BaseScreen from '../BaseScreen';
import Swiper from './SwiperComponent'
class UploadImgs extends BaseScreen {
  constructor(props) {
    super(props)
    this.state = {
      imgList: [],
      showImg: false,
      loading: false
    }
  }
  setImgs = (imgitem) => {
    const imgs = [...this.state.imgList, imgitem]
    this.setState({
      imgList: imgs
    })
  }

  IsDeleteImgUrl = (index) => {
    this.showMsgDialog("你确定要删除这张图片吗");
    this.setState({
      delIndex: index
    })
  }
  deleteImgUrl = () => {
    const imgList = this.state.imgList
    imgList.splice(this.state.delIndex, 1)
    this.setState({
      imgList
    })
  }
  showImg = () => {
    this.setState({
      showImg: !this.state.showImg
    })
  }
  render() {
    const imgList = this.state.imgList
    return (
      <div className={styles['upload_list']}>
        {
          imgList.map((item, index) => {
            return (
              <UploadItem
                key={index}
                index={index}
                IsDeleteImgUrl={this.IsDeleteImgUrl}
                showImg={this.showImg}
                imgurl={item.imgurl}
                width={item.width}
                height={item.height}
                setImgs={this.setImgs}
                setErr={this.setErr}
              />
            )
          })
        }

        {imgList.length < 9 &&
          <UploadItem
            index={imgList.length}
            setImgs={this.setImgs}
            setErr={this.setErr}
          />}
        <HintDialog
          ref="dialog"
          style={{
            color: "#fff"
          }}
          visibility={this.state.alertMsg !== ""}
          content={this.state.alertMsg}
          operateText="确定"
          operateClick={this.deleteImgUrl}
        />
        {/* Swiper */}
        {this.state.showImg &&
          <div style={maskStyle}>
            <div
              style={maskCloseStyle}
              onClick={this.showImg}
            >
              关闭
        </div>
            <Swiper height='auto' imgList={imgList} />
          </div>

        }
      </div>
    )
  }
}

class UploadItem extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      imgurl: '',
      loading:false
    }
  }
  setLoading = (e) =>{
    this.setState({
      loading:e.loading
    })
  }
  render() {
    const { imgurl, width, height, index, IsDeleteImgUrl, showImg, setImgs } = this.props
    return (
      <div
        className={styles['upload_item']}
        style={{
          marginLeft: index % 5 ? '2.5%' : '',
          background: 'url(' + AddCuiji.PZ + ') no-repeat',
          backgroundSize: '100% 60px'
        }}
      >
        <div
          className={styles['upload_item_img']}
        >
          <img
            style={{
              ...itemStyle,
              width: width <= height ? '100%' : 'auto',
              height: width > height ? '100%' : 'auto'
            }}
            src={imgurl}
            alt=''
            onClick={showImg}
          />
        </div>
        {imgurl &&
          <div style={deleteStyle1}>
            <img
              style={deleteStyle2}
              src={Common.DEL}
              alt=''
              onClick={() => { IsDeleteImgUrl(index) }}
            />
          </div>
        }
        {!imgurl &&
          <Upload
            style={inputStyle}
            getImgUrl={this.getImgUrl}
            setImgs={setImgs}
            setLoading={this.setLoading}
          />
        }
        <ProgressView visibility={this.state.loading} mode={ProgressView.MODE_MEDIUM} /> 
      </div>
    )
  }
}

const deleteStyle1 = {
  width: '20px',
  height: '20px',
  position: 'absolute',
  top: '0',
  right: '0',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center'
}
const deleteStyle2 = {
  width: '15px',
  height: '15px',
  background: '#d4d4d4',
  borderRadius: '50%'
}
const itemStyle = {
  display: 'block',
  borderRadius: '8px',
}
const inputStyle = {
  position: 'absolute',
  width: '100%',
  height: '100%',
  top: '0',
  left: '0',
  opacity: '0'
}
const maskStyle = {
  position: 'fixed',
  top: '0',
  left: '0',
  zIndex: '99',
  width: '100%',
  height: '100%',
  background: 'rgba(0,0,0,0.3)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
}
const maskCloseStyle = {
  position: 'absolute',
  top: '10px',
  right: '10px',
  zIndex: '12',
  fontSize: '14px',
  color: '#fff'
}

export default UploadImgs